@import "@/common/constants/StyleConst.scss";

.projectsItemDetail-container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2%;

  .panels {
    width: 96%;
    margin: 0 auto;

    &.small {
      .panel {
        padding-bottom: unset;

        .panel-header {
          border-bottom: unset;
        }

        .panel-subheader {
          .v-avatar {
            align-self: flex-start;
            padding: 6px 0;

            .name {
              white-space: normal;
            }
          }

          .v-list-item__content {
            align-self: flex-start;
            padding: 6px 0;

            .v-list-item__title,
            .v-list-item__subtitle {
              font-size: 12px;
            }
          }
        }
      }
    }

    .panel {
      width: 100%;
      margin: 0 0 8px 0;

      .panel-header {
        padding: 0;
        width: 100%;

        .v-avatar {
          display: unset;
          border-radius: unset;
          margin: unset;
          margin-right: 16px;
          text-align: left;

          .avatar-img {
            border-radius: 50%;
            width: 28px;
            height: 28px;
          }

          .name {
            font-size: 10px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .panel-subheader {
          background-color: $color-theme-lightgrey;
          border-radius: 8px;
          padding: 0;
          width: 100%;

          .panel-subtitle {
            font-size: 12px;
          }
        }
      }

      .panel-content {
        width: 100%;
        margin: 0 auto;
        word-break: break-word;
        line-height: 22px;
        /* 文本行的任意字内断开 */
        word-wrap: break-word;
        /* IE */
        white-space: -moz-pre-wrap;
        /* Mozilla */
        white-space: -hp-pre-wrap;
        /* HP printers */
        white-space: -o-pre-wrap;
        /* Opera 7 */
        white-space: -pre-wrap;
        /* Opera 4-6 */
        white-space: pre;
        /* CSS2 */
        white-space: pre-wrap;
        /* CSS 2.1 */
        white-space: pre-line;
        /* CSS 3 (and 2.1 as well, actually) */
        text-align: left;

        .v-expansion-panel-content__wrap {
          padding: 0px;
        }

        .sub-panels {
          width: 100%;

          .v-expansion-panel--active {
            border: 0;
            padding: 0;

            .v-expansion-panel-header::before {
              background-color: $color-theme-lightgrey;
            }
          }

          .sub-panel {
            width: 100%;

            .sub-panel-header {
              width: 100%;
              padding: 0 8px;
              background-color: $color-theme-lightgrey;
              min-height: 24px !important;
              border-radius: unset;
              font-weight: bold;
            }

            .info-container {
              line-height: 22px;

              .info-content:last-child {
                padding: 6px;
                background-color: $color-theme-lightgrey;
                border-radius: 8px;
              }
            }
          }
        }
      }

      .panel-content:last-child {
        background-color: $color-theme-lightgrey;
        border-radius: 8px;
        color: $color-theme-grey;
      }

      .panel-subheader {
        .v-list-item__content {
          padding: unset;
          align-self: stretch;

          .v-list-item__title {
            font-weight: bold;
            font-size: 12px;
          }

          .v-list-item__subtitle {
            font-size: 12px;
          }
        }

        .v-list-item__action {
          margin: 6px 0;
        }
      }

      .actions-group {
        align-items: center;
        display: flex;
        flex-direction: row;

        .actions-group-icon {
          align-items: center;
          display: flex;
          flex-direction: row;

          .arrow-icon::before {
            font-weight: bold;
          }
        }

        .actions-group-text {
          font-weight: bold;
          align-items: center;
          color: #556282 !important;

          b {
            margin: 0 2px;
          }
        }
      }
    }

    &>.v-expansion-panel--active {
      border: solid 2px $color-theme-orange;
      border-radius: 8px;
      overflow: hidden;

      .panel-header {
        border-bottom: solid 2px $color-theme-orange;
      }

      .v-expansion-panel-header::before {
        background-color: $color-bg-white;
      }

      .panel-subheader {
        background-color: $color-bg-white !important;

      }
    }
  }
}